<template>
  <div>
    <div>
      <div>请选择用户类别</div>
      <div class="tagsss">
        <span
          :class="index == currentOne ? 'active' : ''"
          v-for="(item, index) in userTypeList"
          :key="index"
          @click="handleClickOne(index)"
          >{{ item.name }}</span
        >
      </div>
      <div>请选择产品组</div>
      <div class="tagsss">
        <span
          :class="item.checked ? 'active' : ''"
          v-for="(item, index) in cateList"
          :key="index"
          @click="handleClickTwo(index)"
          >{{ item.name }}</span
        >
      </div>
      <div>请选择渠道维度</div>
      <div class="tagsss">
        <span
          :class="index == currentThree ? 'active' : ''"
          v-for="(item, index) in qd"
          :key="index"
          @click="handleClickThree(index)"
          >{{ item.name }}</span
        >
      </div>
    </div>
    <!-- <el-select
      v-model="value1"
      multiple
      placeholder="请选择"
      @change="itemSelect"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>

    <el-checkbox border v-model="IsChecked" @change="Allselete">全选</el-checkbox> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: [],
      IsChecked: false,
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      userTypeList: [
        { id: 1, name: "金" },
        { id: 2, name: "银" },
        { id: 3, name: "铜" },
        { id: 4, name: "定制" }
      ],
      currentOne: 0,

      cateList: [
        { id: 1, name: "大家电", checked: false },
        { id: 2, name: "小家电", checked: false },
        { id: 3, name: "厨电", checked: false },
        { id: 4, name: "手机通讯", checked: false }
      ],
      currentThree: 0,
      qd: [{ id: 1, name: "线下" }],
      whereMoney: {
        usertype: 1,
        cateIds: [],
        qd: 1
      }
    };
  },
  mounted() {
    this.whereMoneyHandle(this.whereMoney);
  },
  watch: {
    whereMoney: {
      handler(newVal) {
        if (newVal.usertype == 1) {
          //   处理维度
          this.qd = [{ id: 1, name: "线下" }];
          this.whereMoney.qd = 1;
        } else if (newVal.usertype == 4) {
          // 处理维度
          this.qd = [
            { id: 1, name: "线下" },
            { id: 2, name: "线上" },
            { id: 3, name: "线上 + 线下" }
          ];
        } else {
          //  处理维度
          this.qd = [{ id: 2, name: "线上" }];
          this.whereMoney.qd = 2;
        }

        this.whereMoneyHandle(newVal);
      },
      deep: true
    }
  },
  methods: {
    handleClickOne(index) {
      if (index == 3) {
        this.whereMoney.qd = 1;
      }
      this.currentOne = index;
      this.currentThree = 0;
      this.whereMoney.usertype = this.userTypeList[index].id;
    },
    handleClickTwo(index) {
      this.cateList[index].checked = !this.cateList[index].checked;
      let arr = this.cateList;
      let arr1 = arr.filter(item => {
        return item.checked == true;
      });
      this.whereMoney.cateIds = arr1.map(item => {
        return item.id;
      });
    },
    handleClickThree(e) {
      console.log(this.qd[e].id, this.whereMoney.qd);
      this.currentThree = e;
      this.whereMoney.qd = this.qd[e].id;
    },
    whereMoneyHandle(obj) {
      console.log(obj, "ppppp");
    },
    Allselete(e) {
      if (e) {
        this.value1 = this.options.map(item => {
          return item.value;
        });
      } else {
        this.value1 = [];
      }
    },
    itemSelect(e) {
      let selectArr = this.options.map(item => {
        return item.value;
      });
      if (e.sort().toString() === selectArr.sort().toString()) {
        this.IsChecked = true;
      } else {
        this.IsChecked = false;
      }
    }
  }
};
</script>

<style scoped lang="less">
.active {
  background-color: pink;
  color: #fff;
  border: none;
}
.tagsss {
  > span {
    display: inline-block;
    margin: 10px 20px;
    border: 1px solid #000;
    padding: 5px 10px;
  }
}
</style>
